<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: rgb(249,249,249);
				text-align: center;
			}
			#box{
				width: 960px;
				height: 670px;
				border: 1px solid rgb(224,224,224);
				/*border-radius: 2%;*/
				margin: 0px auto;
				overflow: hidden;
			}
			#head{
				height: 50px;
				line-height: 50px;
				background: rgb(85,135,186);
			}
			#head p{
				color: white;
				font-size: 18px;
				float: left;
				margin-left: 30px;
			}
			#left{
				width: 70%;
				height: 620px;
				float: left;
				/*text-align: center;*/
				border-right: 1px solid rgb(224,224,224);
			}
			#right{
				width: 29.89%;
				height: 620px;
				float: left;
				background:rgb(245,245,245);
			}
			#left-nav{
				margin: 50px 100px;
				overflow: hidden;
				/*margin: 0px auto;*/
				/*text-align: center;*/
				
			}
			#left-nav p:nth-of-type(1){
				float: left;
				width: 150px;
				height: 30px;
				line-height: 30px;
				cursor: pointer;
				border: 1px solid rgb(181,181,181);
				background: rgb(248,248,248);
				border-radius: 5px 0 0 5px;
			}
			#left-nav p:nth-of-type(2){
				float: left;
				width: 150px;
				height: 30px;
				cursor: pointer;
				line-height: 30px;
				border-top: 1px solid rgb(181,181,181);
				border-bottom: 1px solid rgb(181,181,181);
				background: rgb(248,248,248);
				/*border-radius: 5px 0 0 5px;*/
			}
			#left-nav p:nth-of-type(3){
				float: left;
				width: 150px;
				height: 30px;
				cursor: pointer;
				line-height: 30px;
				border: 1px solid rgb(181,181,181);
				background: rgb(248,248,248);
				border-radius:0  5px 5px 0;
			}
			#diyizhong{
				width: 100%;
				height: 500px;
				/*background: red;*/
				text-align: left;
				display: none;
			}
			#shoujihaoma	{
				background: white;
				width: 250px;
				height: 20px;
				/*border-radius: 5px;*/
			}	
			#shouji{
				display: inline-block;
				margin-left: 80px;
				margin-right: 20px;
			}
			#a163{
				display: inline-block;
				margin-left: 5px;
			}
			#tianxie{
				font-size: 10px;
				color: rgb(153,153,153);
				margin-left: 170px;
				margin-top: 5px;
			}
			#tupian{
				margin-top: 30px;
				margin-left: 65px;
				margin-right: 20px;
				/*font-size: 15px;*/
				float: left;
				display: inline-block;
			}
			#yanzhengma{
				background: white;
				width: 200px;
				margin-top: 30px;
				float: left;
				height: 20px;
			}
			#yanzhengma1{
				background: white;
				width: 350px;
				margin-top: 30px;
				float: left;
				height: 20px;
			}
			#yanzheng{
				float: left;
				margin-top: 18px;
				margin-left: 20px;
			}
			#qufen{
				font-size: 10px;
				margin-left: 170px;
				margin-top: -10px;
				color: rgb(153,153,153);
			}
			#huoqu{
				/*background: white;*/
				/*border-color: white;*/
				margin: 20px 0 0 175px;
				width: 150px;
				height: 30px;
			}
			a{
				text-decoration: none;
				color: blue;
			}
			#checkBox{
				margin: 20px 15px 0 170px;
			}
			#zhuce{
				width: 100px;
				height: 30px;
				display: inline-block;
				background:rgb(92,172,71);
				color: white;
				margin-left: 170px;
				margin-top: 20px;
			}
			#dierzhong{
				display: none;
			}
			#disanzhong{
				display: none;
			}
		</style>
	</head>
	<body>
		<img src="img/1.png" id="header"/>
		<div id="box">
			<div id="head">
				<p>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</p>
			</div>
			<div id="left">
				<div id="left-nav">
					<p>注册字母邮箱</p>
					<p>注册手机号码邮箱</p>
					<p>注册VIP邮箱</p>
				</div>
				<div id="diyizhong">
					<p id="shouji"><sub>*</sub>手机号码</p><input type="text" name="" id="shoujihaoma" value="" /><p id="a163">@163.com</p>
					<p id="tianxie">请填写手机号码</p>
					<div style="overflow: hidden;">
						<p id="tupian"><sub>*</sub>图片验证码</p><input type="text" name="" id="yanzhengma" value="" />
						<img src="img/2.png" id="yanzheng"/>
					</div>
					<p id="qufen">请填写图片中的字符，不区分大小写</p>
					<input type="button" name="" id="huoqu" value="免费获取验证码" />
					<div style="overflow: hidden;">
						<p id="tupian"><sub>*</sub>短信验证码</p><input type="text" name="" id="yanzhengma1" value="" />
					</div>
					<p id="tianxie">请查收手机短信，并填写短信中的验证码</p>
					<div style="overflow: hidden;">
						<p id="tupian" style="margin-left: 113px;"><sub>*</sub>密码</p><input type="text" name="" id="yanzhengma1" value="" />
					</div>
					<p id="tianxie">6~16个字符，区分大小写</p>	
					<div style="overflow: hidden;">
						<p id="tupian" style="margin-left: 80px;"><sub>*</sub>确认密码</p><input type="text" name="" id="yanzhengma1" value="" />
					</div>
					<p id="tianxie">请再次填写密码</p>
					<input type="checkbox" name="" id="checkBox" value="" /><p style="font-size: 14px;display: inline-block;">同意"<a href="">服务条款</a>"和"<a href="">用户须知</a>"、"<a href="">隐私权相关政策</a>"</p>
					<br />
					<input type="submit" value="立即注册" id="zhuce"/>
				</div>
				<div id="dierzhong">
					<img src="../第1天/img/3.jpg"/ style="width:500px ;">
				</div>
				<div id="disanzhong">
					<img src="../第1天/img/5.jpg"/ style="width: 300px;">
				</div>	
			</div>
			<div id="right">
				<img src="img/3.png"/>
			</div>
		</div>
		<p style="margin-top: 10px;">关于网易  关于网易免费邮  邮箱官方博客  客户服务  隐私政策  |  网易公司版权所有 © 1997-2016</p>
	</body>
	<script type="text/javascript">
		var leftNav = document.getElementById("left-nav");
		var pArray = leftNav.getElementsByTagName("p");
		var diYi = document.getElementById("diyizhong");
		var diEr = document.getElementById("dierzhong");
		var diSan = document.getElementById("disanzhong");
		var zuHe = [diYi,diEr,diSan];
		for(var i = 0;i < pArray.length;i++){
			pArray[i].index = i;
			pArray[i].onclick = function(){
				zuHe[this.index].style.display = "block";
				this.style.background = "blue";
				this.style.color = "white";
				if(this.index == 0){
					diEr.style.display = "none";
					diSan.style.display = "none";
					pArray[1].style.background = "white";
					pArray[1].style.color = "black";
					pArray[2].style.background = "white";
					pArray[2].style.color = "black";
				}else if(this.index == 1){
					diYi.style.display = "none";
					diSan.style.display = "none";
					pArray[0].style.background = "white";
					pArray[0].style.color = "black";
					pArray[2].style.background = "white";
					pArray[2].style.color = "black";
				}else if(this.index == 2){
					diYi.style.display = "none";
					diEr.style.display = "none";
					pArray[0].style.background = "white";
					pArray[0].style.color = "black";
					pArray[1].style.background = "white";
					pArray[1].style.color = "black";
				}
			}
		}
	</script>
</html>